<template>
    <div>
        <el-card class="!border-none mb-4" shadow="never">
            <el-form :model="queryParams" class="mb-[-16px]" inline>
                <el-form-item label="账户名" prop="account">
                    <el-input v-model="queryParams.account" class="w-[280px]" clearable placeholder="请输入账户名" />
                </el-form-item>
                <el-form-item label="名字" prop="name">
                    <el-input v-model="queryParams.name" class="w-[280px]" clearable placeholder="请输入名字" />
                </el-form-item>
                <el-form-item label="手机号" prop="mobile">
                    <el-input v-model="queryParams.mobile" class="w-[280px]" clearable placeholder="请输入手机号" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="resetPage">查询</el-button>
                    <el-button @click="resetParams">重置</el-button>
                </el-form-item>
            </el-form>
        </el-card>
        <el-card v-loading="pager.loading" class="!border-none" shadow="never">
            <div class="mt-4">
                <el-table :data="pager.lists">
                    <el-table-column label="账户名" prop="account" show-overflow-tooltip />
                    <el-table-column label="名字" prop="name" show-overflow-tooltip />
                    <el-table-column label="手机号" prop="mobile" show-overflow-tooltip />
                    <el-table-column label="备注" prop="remark" show-overflow-tooltip />
                    <el-table-column label="是否禁用" prop="is_disable" show-overflow-tooltip>
                        <template #default="{ row }">
                            <el-button size="small" type="primary" @click="handlePermission(row)">
                                {{ row.is_disable ? '启用' : '禁用' }}
                            </el-button>

                        </template>
                    </el-table-column>
                    <el-table-column label="分账比例" prop="dealer_share_ratio" show-overflow-tooltip />
                    <el-table-column label="登录时间" prop="login_time" show-overflow-tooltip />
                    <el-table-column label="登录IP" prop="login_ip" show-overflow-tooltip />
                    <el-table-column label="通知剩余次数" prop="notice_num" show-overflow-tooltip />
                    <el-table-column label="操作">
                        <template #default="{ row }">
                            <el-button type="primary" size="small" @click="resetPassword(row.id)">
                                重置密码
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="flex mt-4 justify-end">
                <pagination v-model="pager" @change="getLists" />
            </div>
        </el-card>
        <edit-popup v-if="showEdit" ref="editRef" :dict-data="dictData" @close="showEdit = false" @success="getLists" />

    </div>
</template>

<script lang="ts" name="boomAgentLists" setup>
import { usePaging } from '@/hooks/usePaging'
import { useDictData } from '@/hooks/useDictOptions'
import { apiBoomAgentLists, apiResetPassword } from '@/api/agent'
import EditPopup from './edit.vue'

const editRef = shallowRef<InstanceType<typeof EditPopup>>()
// 是否显示编辑框
const showEdit = ref(false)


// 查询条件
const queryParams = reactive({
    account: '',
    avatar: '',
    name: '',
    password: '',
    salt: '',
    dealer_id: '',
    mobile: '',
    remark: '',
    is_disable: '',
    dealer_share_ratio: '',
    login_time: '',
    login_ip: '',
    account_id: '',
    notice_num: '',
    money: '',
    frozen_money: ''
})

// 选中数据
const selectData = ref<any[]>([])


// 获取字典数据
const { dictData } = useDictData('')

// 分页相关
const { pager, getLists, resetParams, resetPage } = usePaging({
    fetchFun: apiBoomAgentLists,
    params: queryParams
})



const resetPassword = async (id: any) => {
    await apiResetPassword({ agent_id: id })

}


getLists()

const handlePermission = (row: any) => {
    console.log('handlePermission')
}
</script>
